<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.org/ui">

    <f:view contentType="text/html">

        <h:head>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
            <title>Course Page</title>
            
             <link type="text/css" rel="stylesheet" href="https://www.gstatic.com/freebase/suggest/4_2/suggest.min.css" />
            <!--<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>-->
            <script type="text/javascript" src="https://www.gstatic.com/freebase/suggest/4_2/suggest.min.js"></script>

            <script type="text/javascript">

                $(function() {
                    $("#courseid")
                            .suggest({
                        key: "AIzaSyA0Fjcd-S9IZV8WKl6o4JQsyTseu1M43NA",
                        show_id: true
                    })
                            .bind("fb-select", function(e, data) {
                        if (data.notable) {
                            document.getElementById('courseid').value = data.name + " " + '(' + data.notable.name + ')';
                        } else {
                            document.getElementById('courseid').value = data.name;
                        }
                    });
                });

            </script>
        </h:head>

        <h:body>
            
             <p:layout fullPage="true">
                <p:layoutUnit position="north" header="EducationX">
                    <p:toolbar style="height:25px">
                        <p:toolbarGroup align="left">
                            <h:link value="Courses" outcome="courses" />     
                            <p:separator />  
                            <h:link value="User Page" outcome="userPage"/>
                            <p:separator />  
                            <h:link value="Tags" outcome="tags"/>
                        </p:toolbarGroup>
                        <p:toolbarGroup align="right">
                            <p:inputText id="courseid" style="width:300px; height:20px; font-size:12px" />
                            <p:button value="Search" style="top:3px; height:20px; font-size: 12px">
                            </p:button>
                        </p:toolbarGroup>
                    </p:toolbar> 
                </p:layoutUnit>
                 
                 <p:layoutUnit position="center">
                     
                    <h:messages errorStyle="color: red" infoStyle="color: green" layout="table"/>
                    <h1>Subscribe Course</h1>
                    <h:form>
                        <h:panelGrid columns="2">
                                <h:outputText value="Course Name: "/>
                                <h:outputText id="name" value="#{user.enrolledCourse.name}" title="Name" />
                                                            
                                <h:outputText value="Course Content: "/>
                                <h:outputText id="description" value="#{user.enrolledCourse.description}" title="Link"  />

                                <h:outputText value="Status:   "/>
                                <h:outputText id="status" value="#{user.enrolledCourse.status}" title="Order" />                              
                            </h:panelGrid>                           
                        <br />                          
                        <h:commandButton action="#{user.enrollCourse}" value="Subscribe course">
                        </h:commandButton>
                        <br />                                   
                    </h:form>
                     
                 </p:layoutUnit>
                 
             </p:layout>
        </h:body>
        
    </f:view>
</html>